import React, { useEffect } from 'react';
import { Chart } from '@antv/g2';
import * as numeral from "numeral";

const MyPie = ({data}) => {
    useEffect(() => {
        const chart = new Chart({
            container: 'container',
            autoFit: true,
        });

        chart.coordinate({ type: 'theta', outerRadius: 0.8 });

        chart
            .interval()
            .data(data)
            .transform({ type: 'stackY' })
            .encode('y', 'percent')
            .encode('color', 'item')
            .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
            .label({
                position: 'outside',
                text: (data) => `${data.item}: ${(data.percent * 100).toFixed(2)}%`,
            })
            .tooltip((data) => ({
                name: data.item,
                value: `${data.count}次`,
            }));

        chart.render();

        // Cleanup function to destroy the chart instance when the component is unmounted
        return () => {
            chart.destroy();
        };
    }, [data]);

    return <div id="container"  />;
};

export default MyPie;
